<template>
    <div class="data-info">
        <div 
          ref="container"
          v-loading="loading"
        >
        </div>
    </div>

</template>

<script>
    import Chart from "@/components/g2/chart";
    import { chartData } from "@/api"

    export default {
      data() {
        return {
          newChartData: [
            { name: '企业主体', industry_name: '金融业', data: 10050 },
            { name: '个体户主体', industry_name: '金融业', data: 4500 },

            { name: '企业主体', industry_name: '教育', data: 13050 },
            { name: '个体户主体', industry_name: '教育', data: 4800 },

            { name: '企业主体', industry_name: '房地产', data: 8900 },
            { name: '个体户主体', industry_name: '房地产', data: 2300 },

            { name: '企业主体', industry_name: '建筑业', data: 16900 },
            { name: '个体户主体', industry_name: '建筑业', data: 6900 },

            { name: '企业主体', industry_name: '机械制造', data: 4500 },
            { name: '个体户主体', industry_name: '机械制造', data: 9200 },

            { name: '企业主体', industry_name: '珠宝', data: 11003 },
            { name: '个体户主体', industry_name: '珠宝', data: 5020 },

            { name: '企业主体', industry_name: '汽车配件', data: 3890 },
            { name: '个体户主体', industry_name: '汽车配件', data: 1500 },

            { name: '企业主体', industry_name: '电子配件', data: 9500 },
            { name: '个体户主体', industry_name: '电子配件', data: 9400 },

            { name: '企业主体', industry_name: '家居', data: 11050 },
            { name: '个体户主体', industry_name: '家居', data: 5500 },

            { name: '企业主体', industry_name: '美妆', data: 4390 },
            { name: '个体户主体', industry_name: '美妆', data: 1908 },

            { name: '企业主体', industry_name: '环保材料', data: 3900 },
            { name: '个体户主体', industry_name: '环保材料', data: 9300 }
          ],
          chartData: [],
          loading: true
        }
      },
      created() {
        this.getChartData()
      },
      mounted() {
        //
      },
      methods: {
        getChartData() {
          this.loading = true
          chartData(response => {
            this.chartData = response.data
            const newData = []
            this.chartData.forEach(item => {
              newData.push({
                name: '企业主体',
                industry_name: item.name,
                data: item.qiye
              })
              newData.push({
                name: '个体户主体',
                industry_name: item.name,
                data: item.geti
              })
            })
            this.setChartData(newData)
            this.loading = false
          })
        },
        setChartData(data) {
          // Step 1: 创建 Chart 对象
          const chart = new Chart({
              container: this.$refs['container'], // 指定图表容器 ID
              autoFit: true,
              height: 500,
          });
          // Step 2: 载入数据源
          chart.data(data);
          chart.scale('data', {
            nice: true,
          })
          chart.tooltip({
            showMarkers: false,
            shared: true,
          })
          chart
            .interval()
            .position('industry_name*data')
            .color('name')
            .adjust([
              {
                type: 'dodge',
                marginRatio: 0,
              },
            ]);

          chart.interaction('element-highlight-by-x')
          // Step 3: 创建图形语法，绘制柱状图
          chart.theme(
            {"colors10":["#FF4500","#1AAF8B","#406C85","#F6BD16","#B40F0F","#2FB8FC","#4435FF","#FF5CA2","#BBE800","#FE8A26"],"colors20":["#FF4500","#1AAF8B","#406C85","#F6BD16","#B40F0F","#2FB8FC","#4435FF","#FF5CA2","#BBE800","#FE8A26","#946DFF","#6C3E00","#6193FF","#FF988E","#36BCCB","#004988","#FFCF9D","#CCDC8A","#8D00A1","#1CC25E"]}
          )
          chart.render();
        }
      }
    }
</script>
